<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>代理商首页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta name="msapplication-tap-highlinght" content="no" />
    <style type="text/css">
        html{height: 100%; width: 100%;}
        html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, ins, s, strong, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, section, audio, video{margin: 0; padding: 0; border: none; font-size: 100%; font: inherit; font-family: Arial, MicroSoft-YaHei; vertical-align: baseline; tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;}
        input, select, textarea{font-size: 100%; outline: none; border: none; background: none;}
        a{text-decoration: none;}
        ol, ul, li{list-style: none;}
        html{background: url(/static/images/hallbg.jpg) no-repeat center bottom,url(/static/images/bg.jpg) repeat-y; background-size: 100% auto;}
        div.wrap{color: #fff; line-height: 1;}
        /*顶部个人信息*/
        .top{height: 15.605vw; padding-top: 2.04vw; padding-left: 11.28vw;}
        .top .por{width: 15.73vw; float: left;}
        .top .por img{width: 15.73vw; display: block;}
        .top .Name{float: left; padding:1.206vw 0 0 0.88vw;}
        .top .Name .idno{height: 4.8vw; font-size: 4vw;}
        .top .Name .idno span{display: block; width: 25vw; height: 4.8vw; line-height: 1.2; float: left; padding-right: 2.33vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow:2px 2px 1px #000;}
        .top .Name .brill{width: 33.33vw; height: 7.733vw; background: url(/static/images/number_bg.png) no-repeat; background-size: 100%; margin: 0.667vw 0 0 0.266vw; line-height: 8.4vw; clear: both;}
        .top .Name .brill img{width: 7vw; float: left; padding-left: 2.577vw; padding-top: 1.3vw;}
        .top .Name .brill span{display: block; width: 18vw; font-size: 3.467vw; float: left; padding-left: 2.488vw; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
        /*充值排行*/
        .ranking{width: 84.267vw; height: 84.177vw; max-height: 84.177vw; overflow-y: scroll; margin: 2.04vw auto 3.022vw; background: url(/static/images/Ranking_box.png) no-repeat center; background-size: 100% 100%;}
        .ranking ul{margin-top: 2.2vw; height: 4vw; font-size: 4vw; letter-spacing: 0.5vw; text-align: center;}
        .ranking ul li{float: left; width: calc(100% / 3);}
        .ranking ul.listTitle{height: 4vw; margin-top: 10.4vw; font-size: 4vw;}
        /*底部按钮*/
        .selectBtn{height: 29.8673vw; width: 68.6256vw; margin: 0 auto 5.0666vw;}
        .selectBtn a{display: block; width: 31.335vw; height: 11.867vw; float: left;}
        .selectBtn a.toRecharge{background: url(/static/images/recharge_btn.png) no-repeat; background-size: 100%;}
        .selectBtn a.toAttorn{background: url(/static/images/attorn.png) no-repeat; background-size: 100%;}
        .selectBtn a.RechargeRecord{background: url(/static/images/record.png) no-repeat; background-size: 100%;}
        .selectBtn a.AttornRecord{background: url(/static/images/attorn_record.png) no-repeat; background-size: 100%;}
        .selectBtn a:nth-of-type(2n){margin-left: 5.9556vw;}
        .selectBtn a:nth-of-type(n+3){margin-top: 6.1333vw;}
        /*底部说明*/
        .state{padding: 0 8vw 0 9.3333vw; font-size: 3.6vw; text-indent: 7vw; line-height: 1.4; letter-spacing: 0.32vw;}
        .state em{color: rgb(255, 0, 0);}
        /*iphone 4*/
        @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
            .ranking{height: 81vw; max-height: 81vw; margin: 0.5vw auto 1.5625vw;}
            .ranking ul{margin-top: 2vw;}
            .selectBtn a:nth-of-type(n+3){margin-top: 4.6875vw;}
            .selectBtn{margin-bottom: 3vw;}
        }
        /*ipad*/
        @media screen and (min-width: 450px){
            .ranking{height: 74vw; max-height: 74vw; margin: 1vw auto 1.5vw;}
            .ranking ul.listTitle{height: 3.5vw; font-size: 3.5vw;}
            .ranking ul{height: 3.5vw; font-size: 3.5vw; margin-top: 2vw;}
            .selectBtn{width: 51.9176vw; height: 22.448vw; margin-bottom: 3vw;}
            .selectBtn a{width: 22.981vw; height: 8.724vw;}
            .selectBtn a:nth-of-type(n+3){margin-top: 5vw;}
            .state{font-size: 3vw; text-indent: 6vw;}
        }
    </style>
</head>
<body>
	<div class="wrap">
        <div class="top">
            <div class="por"><img src="/static/images/portrait.png"></div>
            <div class="Name">
                <div class="idno">
                    <span>{$user['nickname']}</span>
                    <span>ID:{$user['id']}</span>
                </div>
                <div class="brill">
                    <img src="/static/images/brilliant.png">
                    <span>{$user['diamond']}</span>
                </div>
            </div>
        </div>
        <div class="ranking">
            <ul class="listTitle">
                <li>排名</li>
                <li>ID</li>
                <li>充值金额</li>
            </ul>
            <!--循环输出排名开始-->
            {foreach name="list" id="vo" key="k"}
            <ul>
                <li>{$k+1}</li>
                <li>{$vo['id']}</li>
                <li>{$vo['money']}</li>
            </ul>
            {/foreach}
            <!--循环输出排名结束-->
        </div>
        <div class="selectBtn">
            <a href="{$rechargeurl}" class="toRecharge"></a><!--充值-->
            <a href="{$transferurl}" class="toAttorn"></a><!--转让-->
            <a href="{$recordlisturl}" class="RechargeRecord"></a><!--充值记录-->
            <a href="{$transferlisturl}" class="AttornRecord"></a><!--转让记录-->
        </div>
        <p class="state">本月已充值<em>{$money}</em>元。当月充值前三名可获得10000、5000、2000钻石，所获钻石不能超过当月充值钻石总数的1/4。</p>
	</div>
</body>
</html>